import React from 'react';
import { connect } from 'dva';
import { DeleteOutlined, PlusOutlined, PrinterOutlined } from '@ant-design/icons';
import { Layout, Button } from 'antd';
import BaseComponent from 'components/BaseComponent';
import Toolbar from 'components/Toolbar';
import SearchBar from 'components/SearchBar';
import DataTable, {Oper} from 'components/DataTable';
import { ModalForm, ModalTable } from 'components/Modal';
import createColumns from './columns';
import $$ from "cmn-utils";
import Icon from "components/Icon";
const { Content, Header, Footer } = Layout;
const Pagination = DataTable.Pagination;

@connect(({ mconfig, loading }) => ({
  mconfig,
  loading: loading.models.mconfig
}))
export default class extends BaseComponent {
  state = {
    record: null,
    visible: false,
    roleFormVisible: false,
    rows: [],
  };

  handleDelete = records => {
    const { rows } = this.state;

    this.props.dispatch({
      type: 'users/remove',
      payload: {
        records,
        success: () => {
          this.setState({
            rows: rows.filter(
              item => !records.some(jtem => jtem.id === item.id)
            )
          });
        }
      }
    });
  };

  showRoleForm = record =>{
    if (!record) return;
    if ($$.isArray(record) && !record.length) return;
    this.setState({
      record,
      roleFormVisible: true,
    });
    this.props.dispatch({
      type: 'users/getUserRoleList',
      payload: {'userId': record.id},
    })
  };

  handleActive = (record, val) =>{
    record.isDelete ? record.isDelete = 0 : record.isDelete = 1;
    this.props.dispatch({
      type: 'mconfig/update',
      payload:{
        values:record,
        success: () => {
        
        }
      },
    })
  };
  exportExl(){
    const data  = this.props.mconfig.pageData;
    const jsonData = {
      pageNum:data.pageNum,
      pageSize:data.pageSize,
      ...data.filters
    }
    this.props.dispatch({
      type: 'mconfig/exportPageInfo',
      payload: {
        pageData: jsonData
      }
    })
  }
  render() {
    const { mconfig, loading, dispatch } = this.props;
    const { pageData, roleList, userRoleIds } = mconfig;
    const columns = createColumns(this);
    const { rows, record, visible, roleFormVisible } = this.state;

    const searchBarProps = {
      columns,
      onSearch: values => {
        dispatch({
          type: 'mconfig/getPageInfo',
          payload: {
            pageData: pageData.filter(values).jumpPage(1, 10)
          }
        });
      }
    };

    const dataTableProps = {
      loading,
      columns,
      // rowKey: 'id',
      dataItems: pageData,
      pagination: false,
      // selectType: 'checkbox',
      // showNum: true,
      isScroll: true,
      // selectedRowKeys: rows.map(item => item.id),
      // onChange: ({ pageNum, pageSize }) => {
      //   dispatch({
      //     type: 'mconfig/getPageInfo',
      //     payload: {
      //       pageData: pageData.jumpPage(pageNum, pageSize)
      //     }
      //   });
      // },
      // onSelect: (keys, rows) => this.setState({ rows })
    };

    const roleListFormProps = {
      loading,
      record,
      visible: roleFormVisible,
      title: '编辑角色',
      // columns: roleColumns ,
      columns:  [
        {
          title: '角色名',
          name: 'roleName',
          tableItem: {},
        }],
      modalOpts:{
        width: 700
      },
      tableProps: {dataSource : roleList, pagination: false, value: userRoleIds,},

      onCancel: ()=>{
        this.setState({
          record: null,
          roleFormVisible: false,
        })
      },
      onSubmit: (values, rows)=>{
        this.props.dispatch({
          type: 'users/updateUserRole',
          payload: {
            record,
            roleIds: rows.map(item => item.id),
            success: ()=>{
              this.setState({
                record: null,
                roleFormVisible: false,
              });
            }
          }
        });
      },
    };

    const modalFormProps = {
      loading,
      record,
      visible,
      columns,
      modalOpts: {
        width: 700
      },
      onCancel: () => {
        this.setState({
          record: null,
          visible: false
        });
      },
      onSubmit: values => {
        console.log(values)
        let type = 'mconfig/save';
        if (values.id) type = 'mconfig/update';
        dispatch({
          type,
          payload: {
            values,
            success: () => {
              this.setState({
                record: null,
                visible: false
              });
            }
          }
        });
      }
    };

    return (
      <Layout className="full-layout">
        <Header>
          <Toolbar
            appendLeft = {
             <Button tooltip="导出" onClick={this.exportExl.bind(this)}>
              <Icon type="download" />
            </Button> 
            }
            appendLeft={
              <Button.Group>
                <Button type="primary" icon={<PlusOutlined />} onClick={this.onAdd}>
                  新增
                </Button>
              </Button.Group>
            }
            // pullDown={<SearchBar group="abc" {...searchBarProps} />}
          >
            <SearchBar group="abc" {...searchBarProps} />
          </Toolbar>
        </Header>
        <Content>
          <DataTable {...dataTableProps} />
        </Content>
        <Footer>
          {/* <Pagination {...dataTableProps} /> */}
        </Footer>
        <ModalForm {...modalFormProps} />
        <ModalTable {...roleListFormProps}/>
      </Layout>
    );
  }
}
